﻿@page "/ComboBox/Grouping-Icon"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the grouping and icons supports of the ComboBox. Type a character in the ComboBox element or click on the drodown icon to choose an item from the categorized list/icons list.</p>
</SampleDescription>
<ActionDescription>
   <p>The ComboBox allows to group the relevant items under a corresponding category by mapping the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy' target='_blank'> GroupBy</a> field, and allows to load the list items with icons.</p>
   <p>The grouping sample illustrates how the vegetables are grouped based on its category.</p>
   <p>The 2nd ComboBox is populated with icons that is rendered by mapping the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_IconCss' target='_blank'> IconCss</a> field.</p>
   <p>More information on the grouping feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/combobox/grouping/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="groupList" class="col-lg-6 padding-top">
        <div class="content">
            <h4>Grouping</h4>
            <SfComboBox TValue="string" TItem="Vegetables" Placeholder="Select a vegetable" DataSource="@GroupData">
                <ComboBoxFieldSettings GroupBy="Category" Text="Vegetable" Value="Id"></ComboBoxFieldSettings>
            </SfComboBox>
        </div>
    </div>
    <div id="iconList" class="col-lg-6 padding-top">
        <div class="content">
            <h4> Icons</h4>
            <SfComboBox TValue="string" TItem="SocialMedia" Placeholder="Select a social media" DataSource="@IconData">
                <ComboBoxFieldSettings Text="SocialMediaName" IconCss="Class" Value="Id"></ComboBoxFieldSettings>
            </SfComboBox>
        </div>
    </div>
</div>
<link href="styles/dropdown-list/grouping.css" rel="stylesheet" />

@code{
    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string Id { get; set; }
    }

    public class SocialMedia
    {
        public string Class { get; set; }
        public string SocialMediaName { get; set; }
        public string Id { get; set; }
    }

    List<SocialMedia> IconData = new List<SocialMedia>()
{
        new SocialMedia() { Class= "facebook", SocialMediaName= "Facebook", Id= "media1" },
        new SocialMedia() { Class= "google-plus", SocialMediaName= "Google Plus", Id= "media2" },
        new SocialMedia() { Class= "instagram", SocialMediaName= "Instagram", Id= "media3" },
        new SocialMedia() { Class= "linkedin", SocialMediaName= "LinkedIn", Id= "media4" },
        new SocialMedia() { Class= "skype", SocialMediaName= "Skype", Id= "media5" },
        new SocialMedia() { Class= "tumblr", SocialMediaName= "Tumblr", Id= "media6" },
        new SocialMedia() { Class= "twitter", SocialMediaName= "Twitter", Id= "media7" },
        new SocialMedia() { Class= "vimeo", SocialMediaName= "Vimeo", Id= "media8" },
        new SocialMedia() { Class= "whatsapp", SocialMediaName= "WhatsApp", Id= "media9" },
        new SocialMedia() { Class = "youtube", SocialMediaName= "YouTube", Id = "media10" },
    };

    List<Vegetables> GroupData = new List<Vegetables>()
{
        new Vegetables() { Vegetable = "Cabbage", Category = "Leafy and Salad", Id = "item1" },
        new Vegetables() { Vegetable = "Chickpea", Category = "Beans", Id = "item2" },
        new Vegetables() { Vegetable = "Garlic", Category = "Bulb and Stem", Id = "item3" },
        new Vegetables() { Vegetable = "Green bean", Category = "Beans", Id = "item4" },
        new Vegetables() { Vegetable = "Horse gram", Category = "Beans", Id = "item5" },
        new Vegetables() { Vegetable = "Nopal", Category = "Bulb and Stem", Id = "item6" },
        new Vegetables() { Vegetable = "Onion", Category = "Bulb and Stem", Id = "item7" },
        new Vegetables() { Vegetable = "Pumpkins", Category = "Leafy and Salad", Id = "item8" },
        new Vegetables() { Vegetable = "Spinach", Category = "Leafy and Salad", Id = "item9" },
        new Vegetables() { Vegetable = "Wheat grass", Category = "Leafy and Salad", Id = "item10" },
        new Vegetables() { Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item11" },
    };
}

<style>
    .content {
        width: 270px;
        margin-left: 50px;
    }

    .padding-top {
        padding-top: 15px;
    }
</style>
